---
layout: default
---
photoCollection = getCollection('photographs')
div(class='three columns sidebar')
div(class='container')
    div(class='sixteen columns')
        div(class='photo-section',style='z-index: 3; position: absolute; width: inherit; cursor: pointer; visibility: visible;')
            div(class='main_photograph', style="max-width: #{document.photograph_max_width}px; margin-left: auto; margin-right:auto;")
                div(class='info_comments',style="position: fixed; visibility: hidden;")
                    div(class="info_comment_links", style="padding: 2px; margin-left: 5px; margin-top: 5px;")
                        a(href="#") 
                            span(style="color: white; font-size: 9px;") Info & Comments
                div(data-picture,data-alt="#{document.title}")
                    div(data-src="#{smallpath+document.photograph}")
                    div(data-src="#{mediumpath+document.photograph}",data-media="(min-width:350px)")
                    div(data-src="#{largepath+document.photograph}",data-media="(min-width:450px)")
                    div(data-src="#{fullsizepath+document.photograph}",data-media="(min-width:900px)")
                    noscript
                        img(src="#{fullsizepath+document.photograph}",alt="#{document.title}")
                div.photograph_title= document.title
                if document.comments
                    span.comments_reactions(style="float: right;") 
                        a(href="#{site.url}#{document.url}#disqus_thread") Comments
            div.meta
                for item, index in photoCollection.models
                    if item.id == document.id
                        if index >= 1
                            a.article_nav.right(href="#{photoCollection.models[index-1].attributes.url}")= photoCollection.models[index-1].attributes.title + '»'
                        if index < photoCollection.length - 1
                            a.article_nav.left(href="#{photoCollection.models[index+1].attributes.url}")= '«' + photoCollection.models[index+1].attributes.title 
        div.photo_comments(style="visibility: hidden;")
            div.five.columns
                div.photograph_details(style="display: block; width: inherit;")
                    div.comment_photograph(style="cursor: pointer; width: inherit;")
                        div(data-picture,data-alt="#{document.title}",data-style="width: inherit;",style='width: inherit;')
                            div(data-src="#{smallpath+document.photograph}",data-style="width:inherit;")
                            div(data-src="#{mediumpath+document.photograph}",data-media="(min-width:350px)",data-style="width:inherit;")
                            div(data-src="#{largepath+document.photograph}",data-media="(min-width:450px)",data-style="width:inherit;")
                            div(data-src="#{fullsizepath+document.photograph}",data-media="(min-width:900px)",data-style="width:inherit;")
                            noscript
                                img(src="#{fullsizepath+document.photograph}",alt="#{document.title}",style="width:inherit;")
                    div#image_title= document.title
                    div#date= moment(document.date).utc().format('MMMM Do, YYYY')
                    div#description(style="float: left;overflow: no-display;")
                        !=content
                    div#photo_exif exif 
                    #camera= document.camera
                    #lens= document.lens
                    #exposure= document.exposure
                    #iso= document.iso
            div.ten.columns(style="float:right; display:block;")
                #disqus_thread= content
        if document.comments
            != partial('comments.html.jade')

